<template>
    <div class="phar-box">
        <el-dialog :title="title" :visible.sync="visible">
            <div class="detail-title" slot="title">
                <img src="@/assets/img/icon_title.png" alt="">
                <span>用药详情</span>
            </div>
            <div class="phar-detail-content">
                <ul>
                    <li><span>姓名：</span>{{tableData.userName}}</li>
                    <li><span>咨询类型：</span>{{tableData.inquiryType =='1' ? '视频问诊' : tableData.inquiryType=='2' ? '图文问诊' : tableData.inquiryType =='3' ? '家庭医生': tableData.inquiryType=='4' ? '复诊' : tableData.inquiryType=='5' ? '自主开方' : '-'}}</li>
                    <li><span>开方时间：</span>{{tableData.createTime}}</li>
                </ul>
                <div class="">
                    <!-- <yx-table :is-fit="false" :is-border="false" :table-data="tableData" :columns="tableData[0].prescriptionType == '1'? chinacolumns : columns" :loading="loading" :is-pagination-show="false">
                    </yx-table> -->
                    <el-table class="l-table phar-detail-table" :data="tableData.prescriptionDrugListResps" style="width: 100%" max-height="350" highlight-current-row border>
                        <el-table-column prop="drugName" label="名称">
                            <template slot-scope="scope">
                                <span>{{scope.row.drugName || '-'}} </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="drugSpecifications" label="规格">
                            <template slot-scope="scope">
                                <span>{{scope.row.drugSpecifications || '-'}} </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="detailsNum" label="数量">
                            <template slot-scope="scope">
                                <span>{{scope.row.detailsNum || '-'}} </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="drugPrice" label="单价">
                            <template slot-scope="scope">
                                <span>{{'￥' + scope.row.drugPrice || '-'}} </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="prescriptionTaking" label="用法用量" v-if="prescriptionType == '2'">
                            <template slot-scope="scope">
                                <span>{{scope.row.detailsUsage}} </span>
                                <span>{{scope.row.detailsFrequencyStr}} </span>
                                <span>每次{{scope.row.detailsConsumption}}</span>
                                <span>{{scope.row.detailsConsumptionUnit}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="prescriptionNum" label="付数" v-if="prescriptionType == '1'">
                            <template slot-scope="scope">
                                <span>{{scope.row.prescriptionNum || '-'}} </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="prescriptionTaking" label="用法" v-if="prescriptionType == '1'">
                            <template slot-scope="scope">
                                <span>{{scope.row.prescriptionTaking}} </span>
                                <span>{{scope.row.prescriptionRequirements}} </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="drugOrigin" label="产地">
                            <template slot-scope="scope">
                                <span>{{scope.row.drugOrigin || '-'}} </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="drugCompany" label="厂商">
                            <template slot-scope="scope">
                                <span>{{scope.row.drugCompany || '-'}} </span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    /**
     * @param {Number} [id] - 处方ID
     * @param {String} [type] - 处方类型 1中 2西
     */
    import yxTable from '../../../components/yxtable/yx-table'
    export default {
        components: {
            yxTable
        },
        props: {
            id: {
                type: Number,
                request: true
            },
            type: {
                type: String,
                request: true
            }
        },
        data() {
            return {
                title: '用药详情',
                visible: false,
                loading: false,
                tableData: [],
                prescriptionType: '',
                // type:'',
            }
        },
        methods: {
            init() {
                this.visible = true
                this.getPrescriptionDrugDetail(this.id);
            },
            getPrescriptionDrugDetail(id) {
                this.loading = true;
                this.$ajax.getPrescriptionDrugDetail({ id: id }).then(res => {
                    this.tableData = res.data || [];
                    this.prescriptionType = this.tableData.prescriptionDrugListResps && this.tableData.prescriptionDrugListResps[0] ? this.tableData.prescriptionDrugListResps[0].prescriptionType : '';
                    this.loading = false;
                }).catch(err => {
                    this.loading = false;
                })
            }
        }
    }
</script>

<style lang="scss">
    .phar-box {
        /deep/ .el-dialog__wrapper .el-dialog {
            max-width: 50%;
        }
    }

    .detail-title {
        text-align: left;
        color: #353535;
        font-weight: bold;
        font-size: 14px;

        img {
            width: 20px;
            height: 20px;
            vertical-align: middle;
        }
    }

    .phar-detail-content {
        ul {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            color: #006db8;

            span {
                color: #535353;
            }
        }

        .phar-detail-table {
            border: 1px solid #dcdfe6;
            margin-top: 20px;
        }
    }
</style>